<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div></div>

    <script>

        // DOM新增的方法

        //    obj.innerHTML = ''


        //    创建标签
            // createElement 创建标签
            // createTextNode 创建文本节点

            // appendChild()  添加子元素
            // insertBefore(new , old)  把新的元素插入到旧的元素的前面
            

        // create 创建
        var oP = document.createElement('p') ;
        console.log(oP) ;    // 标签对象
        console.dir(oP) ;

        
        var oText = document.createTextNode('666') ;
        console.log(oText) ;


        oP.appendChild(oText) ;

        console.log(oP) ;

        // document.body.appendChild(oP) ;

        var oDiv = document.querySelector('div') ;

        oDiv.appendChild(oP) ;




        // 每次创建的标签对象都具有唯一性，只能插入一次

        var oP = document.createElement('p') ;
        var oText = document.createTextNode('666') ;
        oP.appendChild(oText) ;

        oDiv.appendChild(oP) ;






        for(var i = 0 ; i < 10 ; i++) {
            var oP = document.createElement('p') ;
            // var oText = document.createTextNode(i) ;
            // oP.appendChild(oText) ;
            oP.innerHTML = i ;
            oDiv.appendChild(oP) ;
        }

        
        // 创建一个h3  放在最前面
        var oH3 = document.createElement('h3') ;
        oH3.innerHTML = 123 ;
        var oP1 = document.querySelector('p') ;
        console.log(oP1) ;

        oDiv.insertBefore(oH3 , oP1) ;



        // var oP2 = '<p></p>' ;
        // console.log(oP2) ;   // 字符串
        // console.dir(oP2) ;

    </script>
    
</body>
</html>